<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>照片中心</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="<%=request.getContextPath() %>/js/jquery-3.1.1.min.js"></script>
<script src="<%=request.getContextPath() %>/js/Angularjs/angular.min.js"></script>
<script src="<%=request.getContextPath() %>/js/Angularjs/angular-route.js"></script>
<script src="<%=request.getContextPath() %>/js/Angularjs/angular-resource.min.js"></script>
<!--<script src="<%=request.getContextPath() %>/js/Angularjs/ui-bootstrap-tpls.js"></script>
 <script src="<%=request.getContextPath() %>/js/Angularjs/angular-touch.js"></script> -->
<script src="<%=request.getContextPath() %>/js/photo/angular-deckgrid.js"></script>
<script src="<%=request.getContextPath() %>/js/system/index.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath() %>/js/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/main.css">
<script src="<%=request.getContextPath() %>/js/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="<%=request.getContextPath() %>/js/livephotoskit.js"></script>
<script src="<%=request.getContextPath() %>/js/infinite/ng-infinite-scroll.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-fileinput/4.4.6/css/fileinput.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.6/js/fileinput.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-fileinput/4.4.6/js/locales/zh.min.js"></script>
<script type="text/javascript">
	
</script>

</head>
<body ng-app="photoCenter" style="margin-top:50px">
		<div class="container ">
			<div class=row>
				<div ul-left>
				</div>
				<div  class="col-sm-12 col-lg-12">
					<div infinite-scroll='loadMore()'  infinite-scroll-distance='0' infinite-scroll-immediate-check='false' infinite-scroll-disabled="scroll" infinite-scroll-use-document-bottom="true"> 
						<div deckgrid source="photos"  class="deckgrid"  cardTemplate="template/deckgrid-card.html"></div>
					</div> 
				</div>
				<button type="button" class="btn btn-info btn-circle navbar-fixed-bottom"  ng-click="upload()"><i class="glyphicon glyphicon-ok"></i></button>
			</div>
		</div>

	<!--模态，弹出框-->
	 <div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"  aria-hidden="true" >
		<div class="modal-dialog modal-lg" style="display: inline-block; width: auto;height:90%" ng-controller="imgCtrl">
			 <div style="position: absolute;z-index: 99;width:100%;">
				<button type="button" class="btn " style="margin-left: 30%;color:red;'" data-dismiss="modal">
					<h2><span id="photoName"></span>&times;</h2>
				</button>
			</div>
					
		 <div  style="position: relative;top: 50%;transform: translateY(-50%);color:black" >
				<img  id="imgInModalID">
				<!-- <span id="livephoto" style="width: 254px; height: 400px;"
				></span> -->
				<!-- <div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<h2>&times;</h2>	
					</button>
				</div> -->
				<!-- <div id="myCarousel" class="carousel slide">
					<div class="carousel-inner">
						<div class="item active">
							<img  id="imgInModalID" ng-src="{{modalPhoto.url}}" >
						</div>
					</div>
					<a class="carousel-control left" href="#myCarousel"
					ng-click="pre()">&lsaquo;
					</a>
					<a class="carousel-control right" href="#myCarousel"
					ng-click="next()">&rsaquo;
					</a>
				</div> -->
			</div>
			 <button type="button" class="btn btn-circle navbar-fixed-bottom"  style="margin-left:50%;color:red;" ng-click="dele()">
				<i class="glyphicon glyphicon-trash"></i>
			</button>
		</div>
	</div>
	
	<!--模态，上传-->
	<div class="modal fade bs-example-modal-lg text-center" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"  aria-hidden="true" >
		<div class="modal-dialog modal-lg" >
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						<h2>&times;</h2>
					</button>
				</div>
					
				<div class="container" ng-controller="uploadCtrl">
					<!-- <div class="row">
						<input type="file" name="files" multiple="multiple" accept="image/*" input-on-change="uploadDown">
					</div> -->
					<div class="row">
						<div  class="col-sm-12">
							<label class="control-label">上传图片</label>
							<input id="fileupload" type="file" multiple="multiple" accept="*" class="file">
						</div>
					</div>
					<!-- <input type="button" class="btn"  value="上传" ng-click="uploadDown()"/>-->	
					<span><br/></span>
				</div>	
				
			</div>
		</div>
	</div>
	
	<!-- 新增分类 -->
	<div class="modal fade" tabindex="-1" id="typeModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-body">
					<input type="text" name="type" placeholder="照片集名称" ng-model="newType"/>
				</div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" ng-click="closeAdd()">关闭</button>
	                <button type="button" class="btn btn-primary" ng-click="saveAdd()">新增</button>
	            </div>
	        </div><!-- /.modal-content -->
	    </div><!-- /.modal -->
	</div>	
	
	<div class="modal fade" id="loadingModal">
	    <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
	        <div class="progress progress-striped active" style="margin-bottom: 0;">
	            <div class="progress-bar" style="width: 100%;"></div>
	        </div>
	        <h5>正在加载...</h5>
	    </div>
	</div>


	
	<div alert-bar message="tipService.message" type="tipService.type"></div>
	
	<img id="lazyImg"  style="display:none"/>
	
</body>
</html>